<template>
  <div class="content-view">

    <pageHead>
      <Button type="primary" @click="addWarp">新增</Button>
    </pageHead>
    <div class="table-body">
      <Tables ref="tables" :columns="gridOption.columns" :value="gridOption.data">
      </Tables>
    </div>

    <editModal ref="editModal" :width="900" :columns="gridOption.columns" :rules="gridOption.rules">
    </editModal>

  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import uiTool from '@/libs/uiTool'
import modelServer from '@/api/system_high/modelServer'

export default {
  name: 'tables_page',

  data() {
    return {
      gridOption: {
        rules: {
          key: [{ required: true, message: '请填写表名称' }],
          name: [{ required: true, message: '请填写表描述' }],
        },
        columns: [
          { title: 'id', key: 'id', width: '80px', is_show_edit: 0 },
          { title: '表名称', key: 'key' },
          { title: '表描述', key: 'name' },
          {
            title: '是否创建表',
            key: 'isTableExist',
            display: true,
            render(h, param) {
              let { isTableExist } = param.row

              if (isTableExist) {
                return <span style={{ color: 'green', 'font-weight': 'bold' }}>已创建</span>
              } else {
                return <span style={{ color: 'red', 'font-weight': 'bold' }}>未创建</span>
              }
            },
          },
          {
            title: '是否生成模型',
            key: 'isExistModel',
            display: true,
            render(h, param) {
              let { isExistModel } = param.row

              if (isExistModel) {
                return <span style={{ color: 'green', 'font-weight': 'bold' }}>已创建</span>
              } else {
                return <span style={{ color: 'red', 'font-weight': 'bold' }}>未创建</span>
              }
            },
          },
          {
            title: '字段是否同步',
            key: 'isDbFielExist',
            display: true,
            render(h, param) {
              let { isDbFielExist } = param.row
              if (isDbFielExist) {
                return <span style={{ color: 'green', 'font-weight': 'bold' }}>是</span>
              } else {
                return <span style={{ color: 'red', 'font-weight': 'bold' }}>否</span>
              }
            },
          },
          { title: '创建时间', key: 'created_date', display: true },
          { title: '更新时间', key: 'updated_date', display: true },
          {
            title: '操作',
            key: 'action',
            type: 'template',
            width: '400px',
            render: (h, params) => {
              let btns = [
                {
                  title: '修改',
                  type: 'primary',
                  click: () => {
                    this.showeditModal(params.row)
                  },
                },
                {
                  title: '删除',
                  type: 'primary',
                  click: () => {
                    this.delConfirm(params.row)
                  },
                },
                {
                  title: '字段管理',
                  type: 'primary',
                  click: () => {
                    this.$router.push({ path: `/system_high/model_field/${params.row.id}` })
                  },
                },
                {
                  title: '自动生成',
                  type: 'primary',
                  click: () => {
                    this.regenerate(params.row)
                  },
                },
              ]

              return uiTool.getBtn(h, btns, this)
            },
          },
        ],
        data: [],
      },
    }
  },
  computed: {
    ...mapGetters({}),
  },
  created() {
    this.init()
  },
  methods: {
    async init() {
      let res = await modelServer.all()
      this.gridOption.data = res.data
    },
    async regenerate(row) {
      uiTool.showConfirm({ content: '你确定生成吗，生成将覆盖原来已存在model和controller,请谨慎操作' }, async () => {
        let res = await modelServer.regenerate(row)
        rootVue.$Message.success('生成成功！')
        this.init()
      })
    },

    addWarp() {
      this.$refs.editModal.addShow({}, async (row) => {
        await modelServer.add(row)

        rootVue.$Message.success('新增成功！')
        this.init()
      })
    },
    showeditModal(row) {
      this.$refs.editModal.editShow(row, async (newRow) => {
        await modelServer.edit(newRow)
        rootVue.$Message.success('修改成功！')
        this.init()
      })
    },
    async delConfirm(row) {
      uiTool.delConfirm(async () => {
        await modelServer.del(row)
        rootVue.$Message.success('删除成功！')
        this.init()
      })
    },
  },
}
</script>
